<template>
    <div v-bind:class="[activeClass,borderClass]"></div>
    <div v-bind:class="[isActive ? activeClass : '',borderClass]"></div>
    <div v-bind:class="[{active: isActive},borderClass]"></div>
</template>

<script setup>
import { ref } from 'vue'
const activeClass = 'active'
const borderClass = 'border'
const isActive = ref(true)
</script>

<style scoped>
.active {
    width: 100px;
    height: 10px;
    margin-bottom: 2px;
    background-color: rgb(59, 192, 241);
}
.border {
    border: 2px solid #000;
}
</style>